<template>

    <view class="my-container" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
        <view class="my-data">
            <!-- 个人信息区域 -->
            <view class="data-content" @tap="goMyDetail">
                <!-- 头像 -->
                <image class="avatar"
                    :src="userInfo ? userInfo.avatarUrl : 'http://121.40.63.147:8081/avatar/default.jpg'"
                    mode="aspectFill" />
                <!-- 相关信息 -->
                <view class="user-data">
                    <text class="nickname">{{ userInfo ? userInfo.nickname : "请登录" }}</text>
                    <image class="img" v-if="userInfo?.gender == 'male'" src="@/static/male.svg"></image>
                    <image class="img" v-else-if="userInfo?.gender == 'female'" src="@/static/female.svg"></image>
                </view>
            </view>
            <!-- 编辑按钮 -->
            <view class="tool">
                <view @tap="goEdit">
                    <text class="iconfont icon-bianji"></text>
                    <text class="text">编辑资料</text>
                </view>
            </view>
        </view>
    </view>
    <!-- 发布-关注-粉丝 -->
    <view class="forum-nav">
        <view class="forum-item" v-for="(item, index) in forumList" :key="index" @tap="goDetailList(item)">
            <text class="num">{{ item.num }}</text>
            <text class="title">{{ item.title }}</text>
        </view>
    </view>
    <!-- 卡片区域 -->
    <view class="card-contanier">
        <CustomCard v-for="(item, index) in cardList" :key="index" :title="item.title" :itemList="item.itemList">
        </CustomCard>
    </view>

</template>

<script setup lang="ts">
import { checkUserLogin } from '@/utils/hook';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { ref, onMounted, watch } from 'vue';
import type { UserInfo, ForumList } from '@/type/user';
import { API_getToken, API_getUserInfo } from '@/service/user';
import { useUserStore } from '@/store';
import CustomCard from './components/CustomCard.vue'
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync();
const userStore = useUserStore();
const userInfo = ref<UserInfo>();
const isLoading = ref<boolean>();
const forumList: ForumList[] = [
    { title: '发布', num: "--", url: "/my_modules/post/post" },
    { title: '关注', num: "--", url: "/my_modules/followers/followers" },
    { title: '粉丝', num: "--", url: "/my_modules/fans/fans" },
]
const cardList = [
    {
        title: '我的发布',
        itemList: [
            { title: '我的足迹', icon: 'icon-history', url: "/my_modules/track/track" },
            { title: '文章收藏', icon: 'icon-wenzhangshoucang', url: "/my_modules/starRecord/starRecord?current=0" },
            { title: '赞过', icon: 'icon-dianzan2', url: "/my_modules/likeRecord/likeRecord" }
        ]
    },
    {
        title: '我的学习',
        itemList: [
            { title: '练习记录', icon: 'icon-lianxijilu', url: "/my_modules/practiceRecord/practiceRecord" },
            { title: '错题集', icon: 'icon-cuotiji1', url: "/my_modules/mistakeCollection/mistakeCollection" },
            { title: '题目收藏', icon: 'icon-timuqueren', url: "/my_modules/starRecord/starRecord?current=2" },
            { title: '八股收藏', icon: 'icon-mianshitiku', url: "/my_modules/starRecord/starRecord?current=1" }
        ]
    }
]
//去往编辑资料
const goEdit = () => {
    checkUserLogin(() => {
        uni.navigateTo({ url: '/my_modules/edit/edit' });
    })
}
//去往个人主页
const goMyDetail = () => {
    checkUserLogin(() => {
        //todo
    })
}
//点击发布、关注、粉丝
const goDetailList = (item: ForumList) => {
    checkUserLogin(() => {
        uni.navigateTo({ url: item.url });
    })
}

onShow(async () => {
    await userStore.getUserInfo();
    userInfo.value = userStore.userInfo;
    forumList[0].num = userInfo.value?.articleCount;
    forumList[1].num = userInfo.value?.followingCount;
    forumList[2].num = userInfo.value?.followersCount;
})
</script>
<style scoped lang="scss">
.my-container {
    background: $color-main;
    border-radius: 0 0 50rpx 50rpx;

    .my-data {
        color: #fff;
        padding: 125rpx 50rpx 100rpx 50rpx;
        display: flex;
        flex-direction: column;
        position: relative;

        .data-content {
            display: flex;
            align-items: center;

            .avatar {
                width: 120rpx;
                height: 120rpx;
                border-radius: 50%;
            }

            .user-data {
                margin-left: 30rpx;
                display: flex;
                align-items: center;
                // flex-direction: column;

                .nickname {
                    white-space: nowrap;
                    font-size: 35rpx;
                    font-weight: 800
                }

                .img {
                    width: 30rpx;
                    height: 30rpx;
                    margin-left: 10rpx;
                }
            }

        }

        .tool {
            position: absolute;
            right: 50rpx;
            top: 170rpx;

            .icon-bianji {
                font-weight: 800;
                font-size: 40rpx;
            }

            .text {
                font-size: 28rpx;
            }
        }
    }
}

.forum-nav {
    color: #333;
    background-color: #fff;
    margin: -60rpx 30rpx 30rpx 30rpx;
    border-radius: 15rpx;
    box-shadow: 0rpx 2rpx 10rpx rgba(0, 0, 0, .1);
    padding: 30rpx 20rpx;
    display: flex;
    justify-content: space-around;

    .forum-item {
        display: flex;
        flex-direction: column;
        align-items: center;

        .num {
            margin-top: 10rpx;
            font-weight: bold;
            font-size: 35rpx
        }

    }
}
</style>